<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米合约机</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <style>
    *{padding: 0;margin: 0}
    </style>
</head>
<body>
     <!-- 头部开始 -->
     <div class="head">
        <div class="head-all center">
            <div class="head-left">
                <a href="">小米网&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;MIUI&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;米聊&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;游戏&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;多看阅读&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;云服务&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;小米网移动版&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;Select region</a>
            </div>
            <div class="head-right">
                <a href="">登录&nbsp;&nbsp;&nbsp;|</a>
                <a href="">&nbsp;&nbsp;&nbsp;注册</a>
            </div>
        </div> 
    </div>
    <!-- 头部结束 -->

    <!-- logo和搜索开始 -->
    <div class="search center">
        <div class="search-logo">
            <img src="images/logo.png" alt="小米">
        </div>
        <div class="search-shop">
            <div class="search-clock">
                <div class="search-clock-left">
                    <i class="iconfont icon-naozhong1"></i>
                </div>
                <div class="search-clock-right">
                    <p>5月12日开放购买</p>
                </div>
            </div>
            <div class="search-cart">
                <form class="parent">
                    <input type="text" placeholder="&nbsp;&nbsp;搜索您需要的商品">
                    <button></button>
                </form>
                <button class="btn center">
                    <i class="iconfont icon-ziyuan"></i>
                    <p>购物车</p>
                </button>
            </div>
        </div>
    </div>
    <!-- logo和搜索结束 -->

    <!-- 导航开始 -->
    <ul class="nav center">
        <li class="drop-down"><a href="#">全部商品分类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;∨</a>
            <ul class="drop-down-content">
                <li><a href="#">手机</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">台式电脑</a></li>
            </ul>
        </li>
        <li><a href="#">首页</a></li>
        <li><a href="#">小米手机</a></li>
        <li><a href="#">红米</a></li>
        <li><a href="#">小米平板</a></li>
        <li><a href="#">小米电视</a></li>
        <li><a href="#">盒子</a></li>
        <li><a href="#">路由器</a></li>
        <li><a href="#">合约机</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">社区</a></li>
    </ul>
    <!-- 导航结束 -->

    <!-- 中间内容开始 -->
    <div class="container">
        <div class="flow center">
            <div class="flow-left">
                <img src="images/mshanghai4.7.jpg" alt="">
            </div>
            <div class="flow-right">
                <h3>话费充值</h3>
                <input type="text" placeholder="&nbsp;&nbsp;请输入手机号码" >
                <select class="footer-select">
                    <option>充值100元</option>
                    <option>充值50元</option>
                    <option>充值500元</option>
                </select><br>
                <span class="price">实时价格：</span>
                <span class="price-1">98.4</span>
                <span class="price-2">元起</span><br>
                <button>立即充值</button>
            </div>
        </div>
        <div class="phone center">
            <div class="phone-left">
                <ul>
                    <li>
                        <div class="contract-phone-all">
                            <img src="images/icon_01.png" alt="">
                            <p>全部合约机</p>
                        
                        
                        <div class="box">
                            <div>
                                <img src="images/联通.jpg" alt=""><br>
                                <button class="btn-red">联通</button>
                                <p>小米note合约机</p>
                                <p>2419元起</p>
                            </div>
                            <div>
                                <img src="images/联通.jpg" alt=""><br>
                                <button class="btn-blue">移动</button>
                                <p>小米note合约机</p>
                                <p>2299元起</p>
                            </div>
                            <div>
                                <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                <button class="btn-red">联通</button>
                                <p>小米4合约机</p>
                                <p>1919元起</p>
                            </div>
                            <div>
                                <img src="images/hm2!149x149.jpg" alt=""><br>
                                <button class="btn-red">联通</button>
                                <p>小米2合约机</p>
                                <p>799元起</p>
                            </div>
                            <div>
                                <img src="images/hm2!149x149.jpg" alt=""><br>
                                <button class="btn-blue">移动</button>
                                <p>小米2合约机</p>
                                <p>699元起</p>
                            </div>

                            <div>
                                <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                <button class="btn-blue">电信</button>
                                <p>已售罄</p>
                                <p>小米4合约机</p>
                                <p>2099元起</p>
                                <div class="shake"></div>
                            </div>
                            <div>
                                <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                <button class="btn-blue">移动</button>
                                <p>小米4合约机</p>
                                <p>1799元起</p>
                            </div>
                            <div>
                                <img src="images/miphone07!149x149.jpg" alt=""><br>
                                <button class="btn-red">联通</button>
                                <p>已售罄</p>
                                <p>红米note 4G合约机</p>
                                <p>1019元起</p>
                                <div class="shake"></div>
                            </div>
                            <div>
                                <img src="images/miphone07!149x149.jpg" alt=""><br>
                                <button class="btn-blue">移动</button>
                                <p>已售罄</p>
                                <p>红米note 4G合约机</p>
                                <p>899元起</p>
                                <div class="shake"></div>
                            </div>
                            <div>
                                <img src="images/miphone07!149x149.jpg" alt=""><br>
                                <button class="btn-blue">移动</button>
                                <p>已售罄</p>
                                <p>红米1S 4G合约机</p>
                                <p>599元起</p>
                                <div class="shake"></div>
                            </div>
                        </div>
                        </div>
                    </li>
                    <li>
                        <div class="contract-phone-yidong">
                            <img src="images/icon_02.png" alt="">
                            <p>移动合约机</p>
                            <div class="box-1">
                                <div>
                                    <img src="images/联通.jpg" alt=""><br>
                                    <button class="btn-blue">移动</button>
                                    <p>小米note合约机</p>
                                    <p>2299元起</p>
                                </div>
                                <div>
                                    <img src="images/hm2!149x149.jpg" alt=""><br>
                                    <button class="btn-blue">移动</button>
                                    <p>小米2合约机</p>
                                    <p>699元起</p>
                                </div>
                                <div>
                                    <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                    <button class="btn-blue">移动</button>
                                    <p>小米4合约机</p>
                                    <p>1799元起</p>
                                </div>
                                <div>
                                    <img src="images/miphone07!149x149.jpg" alt=""><br>
                                    <button class="btn-blue">移动</button>
                                    <p>已售罄</p>
                                    <p>红米note 4G合约机</p>
                                    <p>899元起</p>
                                    <div class="shake"></div>
                                </div>
                                <div>
                                    <img src="images/miphone07!149x149.jpg" alt=""><br>
                                    <button class="btn-blue">移动</button>
                                    <p>已售罄</p>
                                    <p>红米1S 4G合约机</p>
                                    <p>599元起</p>
                                    <div class="shake"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contract-phone-liantong">
                            <img src="images/icon_03.png" alt="">
                            <p>联通合约机</p>
                            <div class="box-2">
                                <div>
                                    <img src="images/联通.jpg" alt=""><br>
                                    <button class="btn-red-liantong">联通</button>
                                    <p>小米note合约机</p>
                                    <p>2419元起</p>
                                </div>
                                <div>
                                    <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                    <button class="btn-red-liantong">联通</button>
                                    <p>小米4合约机</p>
                                    <p>1919元起</p>
                                </div>
                                <div>
                                    <img src="images/hm2!149x149.jpg" alt=""><br>
                                    <button class="btn-red-liantong">联通</button>
                                    <p>小米2合约机</p>
                                    <p>799元起</p>
                                </div>
                                <div>
                                    <img src="images/miphone07!149x149.jpg" alt=""><br>
                                    <button class="btn-red-liantong">联通</button>
                                    <p>已售罄</p>
                                    <p>红米note 4G合约机</p>
                                    <p>1019元起</p>
                                    <div class="shake-liantong"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="contract-phone-dianxin">
                            <img src="images/icon_04.png" alt="">
                            <p>电信合约机</p>
                            <div class="box-3">
                                <div>
                                    <img src="images/mi4Front!144x149.jpg" alt=""><br>
                                    <button class="btn-blue-dianxin">电信</button>
                                    <p>已售罄</p>
                                    <p>小米4合约机</p>
                                    <p>2099元起</p>
                                    <div class="shake"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="phone-right">
                <div class="liantong">
                    <h3>联通授权标识</h3>
                    <img src="images/liantong.png" alt="">
                </div>
                <div class="dianxin">
                    <h3>电信授权标识</h3>
                    <img src="images/dianxin.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 中间内容结束 -->

    <!-- 尾部开始 -->
    <div class="footer-all center">
        <div class="footer-top">
            <div class="footer-1">
                    <img src="images/10.png" alt="" >
                    <p>1小时快修服务</p>
            </div>  
            <div class="footer-2"> 
                    <img src="images/11.png" alt="">
                    <p>7天无理由退货</p>
            </div>
            <div class="footer-3">
                    <img src="images/12.png" alt="">
                    <p>15天免费换货</p>
            </div>
            <div class="footer-4">
                    <img src="images/13.png" alt="">
                    <p>满150元包邮</p>
            </div>  
            <div class="footer-5">
                    <img src="images/14.png" alt="">
                    <p>520余家售后网点<br></p>
            </div>    
        </div>
        <div class="footer-center">
            <div class="footer-help">
                <h3>帮助中心</h3>
                <p>购物指南</p>
                <p>支付方式</p>
                <p>配送方式</p>
            </div>
            <div class="footer-server">
                <h3>服务支持</h3>
                <p>售后政策</p>
                <p>自助服务</p>
                <p>相关下载</p>
            </div>
            <div class="footer-home">
                <h3>小米之家</h3>
                <p>小米之家</p>
                <p>服务网点</p>
                <p>预约亲临到店服务</p>
            </div>
            <div class="footer-about">
                <h3>关于小米</h3>
                <p>了解小米</p>
                <p>加入小米</p>
                <p>联系我们</p>
            </div>
            <div class="footer-us">
                <h3>关注我们</h3>
                <p>新浪微博</p>
                <p>小米部落</p>
                <p>官方微信</p>
            </div>
            <div class="footer-phone">
                <h2>400-100-5678</h2>
                <p>周一至周日8:00-18:00</p>
                <p>（仅收市话费）</p>
                <button class="btn-1">24小时在线服务</button>
            </div>
        </div>
        <div class="footer-down">
            <div class="footer-web">
            <p>小米旗下网站：小米网 | MIUI | 米聊 | 多看书城 | 小米路由器 | 繁体香港 | 繁体台湾 | English | 小米后院 | 小米天猫店 | 小米淘宝直营店 | 小米网盟</p>    
            <p>@mi.com 京ICP证110507号 京ICP备1004644号 京网文[2014]0059-0009号</p>    
        </div>
        </div>
        <div class="footer-brand">
        <img src="images/16.png" alt="" >
        <select class="footer-select">
            <option>简体中文</option>
            <option>繁体中文</option>
            <option>英语</option>
        </select>
        </div>
    </div>
    <!--尾部结束 -->
</body>
</html>